<template>
  <div class="event-select task-flex task-ai">
    <div class="task-flex task-ai task-mr12">
      <span>{{$t('task.list.displayName.chooseTag')}}：</span>
      <el-select v-model="department" multiple :placeholder="$t('common.placeholder.selectDepartment')" class="task-span1">
        <el-option
          v-for="item in departmentList"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </div>

    <div class="task-flex task-ai">
      <span>{{$t('common.base.createTime')}}:</span>
      <el-date-picker
        class="task-span1"
        v-model="dataTime"
        type="datetimerange"
        :picker-options="pickerOptions"
        :range-separator="$t('common.base.to')"
        :start-placeholder="$t('common.base.startDate')"
        :end-placeholder="$t('common.base.endDate')"
        value-format="timestamp"
        :default-time="['00:00:00', '23:59:59']"
        align="right">
      </el-date-picker>
    </div>
  </div>
</template>
<script>
import { nearDateBy, dayTimeEnd, useDatePicker } from 'pub-bbx-utils';
import { t } from '@src/locales'



export default {
  name: 'event-select',
  data() {
    const startTime = +nearDateBy(1, 'week');
    const endTime = +dayTimeEnd();
    const { today, yesterday, nearDate } = useDatePicker()

    return {
      pickerOptions: {
        shortcuts: [
          today(t('common.time.today')),
          yesterday(t('common.time.yesterday')),
          nearDate(t('common.time.lastWeek'), 1, 'week'),
          nearDate(t('common.time.lastMonth'), 1, 'month'),
          nearDate(t('common.time.lastThreeMonth'), 3, 'month'),
        ]
      },
      dataTime: [startTime, endTime], // 创建时间
      department: '', // 部门
      departmentList: [] // 部门列表
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../system.scss';
</style>
<style lang="scss">
.event-select {
    .el-range-separator {
        width: 10%!important;
    }
}
</style>